<template>
  <div class="slots">
    <div style="display: flex; justify-content: center">
      <img
        src="../../../assets/communication.png"
        alt=""
        style="height: 200px; width: 200px"
      />
    </div>
    <p class="slot">1.默认插槽 slot</p>
    <div class="content">
      <Categroy title="今日美食城市">
        <template #content>
          <img :src="imgUrl" alt="" class="img" />
        </template>

        <template #footer></template>
      </Categroy>
      <Categroy title="热门游戏列表">
        <template #content>
          <ul>
            <li v-for="item in gameList" :key="item.id">
              {{ item.name }}
            </li>
          </ul>
        </template>
      </Categroy>

      <Categroy title="今日影视推荐" />
    </div>
    <br />
    <p class="slot">2.具名插槽 slot name="content"</p>

    <div>
      <Categroy title="今日美食城市" @comfirm="comfirm">
        <template #content>
          <p>{{ namea }}</p>
          <img :src="imgUrl" alt="" class="img" />
        </template>

        <template #footer></template>
      </Categroy>
    </div>
    <br />

    <p class="slot">3.作用域插槽 数据是一样的只是显示的样式不一样</p>
    <div class="content">
      <Categroy2>
        <template v-slot="{ music }">
          <ul>
            <li v-for="item in music" :key="item.id">
              {{ item.name }}
            </li>
          </ul>
        </template>

        <template #footer="{ footerOption }">
          <button
            class="btn"
            v-for="(it, index) in footerOption"
            :key="index"
            @click="it.handle == 'comfirm' ? comfirm2() : cancel()"
          >
            {{ it.content }}
          </button>
        </template>
      </Categroy2>

      <Categroy2 @confirm="comfirm2" @cancel="cancel">
        <template v-slot="{ music, a }">
          <p>{{ a }}</p>
          <h2 style="color: red" v-for="item in music" :key="item.id">
            {{ item.name }}
          </h2>
        </template>
      </Categroy2>
    </div>
  </div>
</template>

<script setup lang="ts" name="slot">
import { reactive, ref } from "vue";
import Categroy from "./components/Category.vue";
import Categroy2 from "./components/Category2.vue";
import { ElMessage } from "element-plus";
const namea = ref(11);
const gameList = reactive([
  { id: 1, name: "喲2" },
  { id: 2, name: "喲3" },
  { id: 3, name: "喲5564" },
]);
const imgUrl = "https://z1.ax1x.com/2023/11/19/piNxLo4.jpg";

const vidoRrl = "https://z1.ax1x.com/2023/11/19/piNxLo4.jpg";

const comfirm = () => {
  namea.value += 5;
};
const comfirm2 = () => {
  ElMessage({
    message: "确定",
    type: "success",
  });
};
const cancel = () => {
  ElMessage({
    message: "取消",
    type: "success",
  });
};
</script>

<style scoped lang="scss">
.slots {
  height: 500px;
  overflow-y: scroll;
  .slot {
    background-color: pink;
    padding: 10px;
  }

  .content {
    justify-content: space-evenly;
    display: flex;
    .img {
      width: 100%;
    }
    .btn {
      border-radius: 5px;
      background-color: pink;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
